<template>
    <view class="page-collect pd-v-24 pd-b-68">
        <view class="pd-v-24 pd-h-32 bg-white border8 mr-t-12" v-for="(item,index) in list" :key="'item'+index" @click="goDetail(item)">
            <view class="flex flex-center">
                <view class="flex-1 font32 lh-44 bold color-default">
                    {{item.name}}
                </view>
                
                <view class="font24 lh-24 color-note flex flex-center">
                    <u-icon name="map-fill" color="#999" size="14" class="mr-r-8"></u-icon>
                    {{getDistance(item.location)}}
                </view>
            </view>
            <view class="mr-t-28 flex flex-center">
                <view class="flex-1 flex-end">
                    <text class="font32 lh-40 color-main">￥</text>
                    <text class="font52 lh-40 color-main">{{item.chargeFee}}</text>
                    <text class="font28 lh-24 color-info">/度+服务费</text>
                </view>
                <u-button type="primary"  :customStyle="{width:'170rpx',height:'60rpx',padding:'14rpx 12rpx',fontSize:'24rpx'}" shape="circle" color="#35BE65" @click="join">
                  <image src="@/static/battery.png" style="width:26rpx;height:41rpx;" mode="widthFix" class="mr-r-6"></image>
                  {{item.socketFreeCount}}/{{item.socketTotalCount}}
                </u-button>
            </view>
        </view>
            
    </view>
</template>

<script setup>
import { useStore } from '@/store/index.js';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';


import { collectList } from '@/api/user.js'

const store = useStore();
const list = ref([]);
const params = ref({
    pageSize: 10,
    pageNum: 1,
})
const total = ref(0)
const currentLocation = ref('')

onShow(() => {
    
})

onLoad(() => {
    
    uni.getLocation({
        success: (res) => {
            console.log(res);
            currentLocation.value = res.longitude+','+res.latitude;
        },
        fail: (res) => {
            console.log('失败！！', res);
        }
    })
    getCollectList()

})

const getCollectList = () => {
    collectList(params.value).then(res => {
        if(res.code == 200) {

            list.value = [...list.value,...res.rows]
            total.value = res.total
        }
    })
}

onReachBottom(() => {
    if(list.value.length < total.value) {
        params.value.pageNum++
        getCollectList()
    }
})

const goDetail = (item) => {
    uni.navigateTo({
        url: `/sub_user/pages/detail/detail?id=${item.id}`
    })
}


const getDistance = (location) => {
    if(!location) {
        return ''
    }
    let point1 = {
        latitude: currentLocation.value.split(',')[1],
        longitude: currentLocation.value.split(',')[0]
    }

    let point2 = {
        latitude: location.split(',')[1],
        longitude: location.split(',')[0]
    }
    let R = 6371000; // 地球平均半径，单位：米
    let lat1 = point1.latitude * Math.PI / 180;
    let lat2 = point2.latitude * Math.PI / 180;
    let lon1 = point1.longitude * Math.PI / 180;
    let lon2 = point2.longitude * Math.PI / 180;
    let a = Math.sin((lat2 - lat1) / 2) * Math.sin((lat2 - lat1) / 2) +
            Math.cos(lat1) * Math.cos(lat2) * Math.sin((lon2 - lon1) / 2) * Math.sin((lon2 - lon1) / 2);
    let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    let d = R * c; // 初始计算得到的距离，单位：米
 
    if (d >= 1000) {
        // 如果距离大于等于1000米（即1千米），则换算为千米并保留两位小数
        return (d / 1000).toFixed(2) + "km";
    } else {
        return d.toFixed(2) + "m";
    }
}



</script>

<style scoped lang="scss">
.page-collect {
    background:#F7F7F7;
    min-height:100vh;

    
    
}
</style>
